/*
 *@description:
 *@Author:@reynold
 *@Date:2025-03-25 11:36:48
 *@Update:2025-03-25 11:36:48
 *@Version: V1.0.0
*/
<template>
  <div class="mine_box">
    <div class="mine_top">
      <div class="top_card">
        <div class="card_img">
          <img src="@/assets/logo.png" alt="">
        </div>
        <div class="card_name">
          用户1
        </div>
        <div class="card_pay">
          <div class="card_pay_left">
            <div class="left_top">账户余额</div>
            <div class="left_bottom">{{ pay }}</div>
          </div>
          <div class="card_pay_right"><van-button round type="info" @click="handleClick">金额充值</van-button></div>
        </div>
      </div>
    </div>
    <div class="mine_content">
      <div class="mine_address" @click="toAddress">
        常用地址
      </div>
      <div>
        <van-contact-card type="edit" :name="addressData.name" :tel="addressData.tel" @click="onEdit" />
      </div>
    </div>
    <div class="mine_footer">
      <van-button round type="primary" block @click="toLogout">退出登录</van-button>
    </div>

    <!-- 充值金额面板 -->
    <van-action-sheet v-model="show" title="充值" :style="{ height: '60%' }">
      <div class="content">
        <van-field readonly clickable :value="value" label="充值金额" />
        <!-- <van-number-keyboard  :show="show" :maxlength="6" /> -->
        <van-number-keyboard v-model="value" :show="show" theme="custom" extra-key="." close-button-text="完成"
          @blur="addPay" />
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      addressData: {
        name: '联系我们',
        tel: '13000000000',
      },
      // 金额
      pay: 1000,
      show: false
    }
  },
  methods: {
    onEdit() {
      console.log('联系我们');
    },
    toAddress() {
      this.$router.push('/address')
    },
    toLogout() {
      // 清空登录信息，保存的本地信息
      localStorage.clear()
      this.$router.push('/')
    },
    // 金额充值
    handleClick() {
      console.log('充值金额');
      this.show = true
    },
    addPay() {
      if (this.value) {
        this.pay = this.pay + Number(this.value)
        this.$toast.success('充值成功')
        this.show = false
      } else {
        this.$toast('请输入金额')
      }
    }

  }
}
</script>
<style scoped>
.content {
  padding: 16px 16px 160px;
}

.mine_box {
  width: 100%;
  height: calc(100vh - 50px);
}

.mine_top {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(90deg, #ff5f6d, #ffc371);
  border-radius: 0 0 50% 50%;
  position: relative;
}

.mine_top .top_card {
  width: 90%;
  height: 160px;
  background-color: rgba(237, 234, 234, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  position: absolute;
  left: 5%;
  top: 100px;
}

.card_img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: 35%;
  background-color: rgba(227, 227, 227, 0.4);
}

.card_img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.card_name {
  margin-top: 60px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.card_pay {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mine_address {
  position: relative;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 10px 20px;
  /* border-bottom: 1px solid #ccc; */
  /* 设置底部边框 */
  border-bottom: 1px dashed #ff6c6c;
}

/* .mine_address::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background-size: 80px;
  background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
  content: '';
} */

.left_top {
  color: #ccc;
  font-size: 18px;
}

.left_bottom {
  font-size: 18px;
  margin-top: 5px;
  text-align: center;
  color: #ff766e;
}

.card_pay_right .van-button--round {
  background-color: #ff766e;
  border: none;
}

.mine_content {
  margin-top: 110px;
}

.mine_footer {
  position: fixed;
  bottom: 50px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
}

.mine_footer .van-button--round {
  background-color: #ff766e;
  border: none;
}
</style>